home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2018 July / PCgo 07-2018 CD-ROM Germany.iso / data / css / styles.scss < prev   
Encoding:
Text File  |  2017-06-21  |  8.2 KB  |  551 lines
  1. $small: "only screen and (max-width : 320px)";
  2. $phone: "only screen and (max-width : 360px)";
  3. $desktop: "only screen and (min-width : 720px)";
  4.  
  5. $maincolor: #000;
  6. $subcolor: #fff;
  7. $topsoft: #033990;
  8. $tools: #4b8b1d;
  9. $mm: #ac1c1c;
  10. $extras: #c21c32;
  11. $demo: #949899;
  12. @mixin box-sizing() {
  13.   box-sizing: border-box;
  14.   -moz-box-sizing: border-box;
  15.   -webkit-box-sizing: border-box;
  16. }
  17.  
  18. @mixin clearfix() {
  19.   content: ".";
  20.   display: block;
  21.   clear: both;
  22.   visibility: hidden;
  23.   height: 0;
  24. }
  25.  
  26. * {
  27.   margin: 0;
  28.   padding: 0;
  29. }
  30.  
  31. body {
  32.   font-family: Verdana, Arial, Helvetice, sans-serif;
  33.   font-size: 14px;
  34.   color: $maincolor;
  35. }
  36.  
  37. a {
  38.   text-decoration: none;
  39.   color: $maincolor;
  40. }
  41.  
  42. h1, h2, h3 {
  43.   font-weight: normal;
  44. }
  45.  
  46. h1 {
  47.   margin-bottom: 35px;
  48.   clear: both;
  49. }
  50.  
  51. h2 {
  52.   margin-bottom: 20px;
  53.   font-size: 1.2em;
  54. }
  55.  
  56. h3 {
  57.   margin-bottom: 10px;
  58.   font-size: 1.1em;
  59. }
  60.  
  61. p {
  62.   margin-bottom: 5px;
  63. }
  64.  
  65. img {
  66.   border: none;
  67. }
  68.  
  69. address {
  70.   font-style: normal;
  71. }
  72.  
  73. table {
  74.   clear: both;
  75.   width: 100%;
  76. }
  77.  
  78. th {
  79.   text-align: left;
  80.   width: 33%;
  81. }
  82.  
  83. hr {
  84.   margin: 20px 0;
  85.   color: $subcolor;
  86. }
  87.  
  88. header {
  89.   position: relative;
  90.   ul.topnav {
  91.     text-align: right;
  92.     padding: 30px 30px 10px 0;
  93.     li {
  94.       display: inline;
  95.       margin-left: 5%;
  96.     }
  97.   }
  98.   img.header {
  99.     width: 100%;
  100.     height: auto;
  101.   }
  102.   img.logo {
  103.     position: absolute;
  104.     left: 30px;
  105.     bottom: 3px;
  106.     width: 30%;
  107.     height: auto;
  108.   }
  109. }
  110.  
  111. nav {
  112.   ul {
  113.     list-style: none;
  114.   }
  115. }
  116.  
  117. div.wrapper {
  118.   width: 100%;
  119.   max-width: 1200px;
  120.   margin: 0 auto;
  121. }
  122.  
  123. div.main {
  124.   padding: 30px 30px 0 30px;
  125. }
  126.  
  127. p.number {
  128.   font-size: 1.2em;
  129.   margin-bottom: 30px;
  130. }
  131.  
  132. ul.mainnav {
  133.   margin-bottom: 30px;
  134.   li {
  135.     width: 24%;
  136.     margin-left: 1.3%;
  137.     float: left;
  138.     position: relative;
  139.   }
  140.   li:first-child {
  141.     margin-left: 0;
  142.   }
  143.   img {
  144.     width: 100%;
  145.     height: auto;
  146.   }
  147.   span {
  148.     position: absolute;
  149.     left: 0;
  150.     bottom: 0;
  151.     display: block;
  152.     background: $subcolor;
  153.     width: 80%;
  154.     font-size: 1.3em;
  155.     padding: 15px;
  156.     @include box-sizing();
  157.   }
  158. }
  159.  
  160. ul.mainnav:after, section:after, div.software:after, ul.jump:after {
  161.   @include clearfix();
  162. }
  163.  
  164. ul.jump {
  165.   float: right;
  166.   margin-bottom: 10px;
  167.   li {
  168.     display: inline;
  169.   }
  170.   a {
  171.     float: left;
  172.     width: 60px;
  173.     height: 32px;
  174.     margin-left: 20px;
  175.   }
  176.   li:first-child {
  177.     a {
  178.       background: url(../images/static/pfeil_links_grau.png) no-repeat;
  179.     }
  180.     a:hover {
  181.       background: url(../images/static/pfeil_links_rot.png) no-repeat;
  182.     }
  183.   }
  184.   li:last-child {
  185.     a {
  186.       background: url(../images/static/pfeil_rechts_grau.png) no-repeat;
  187.     }
  188.     a:hover {
  189.       background: url(../images/static/pfeil_rechts_rot.png) no-repeat;
  190.     }
  191.   }
  192. }
  193.  
  194. section {
  195.   //background: $maincolor;
  196.   //color: $subcolor;
  197.   border: 1px solid $maincolor;
  198.   padding: 50px 30px;
  199.   margin-bottom: 30px;
  200.   clear: both;
  201.   a {
  202.     color: $subcolor;
  203.   }
  204.   ul {
  205.     margin-left: 12px;
  206.     margin-bottom: 5px;
  207.   }
  208.   div.half {
  209.     float: left;
  210.     width: 50%;
  211.   }
  212.  
  213.   div.image {
  214.     text-align: center;
  215.   }
  216.  
  217.   div.twothird {
  218.     padding-left: 40px;
  219.     @include box-sizing();
  220.     float: left;
  221.     width: 60%;
  222.     a {
  223.       color: #033990;
  224.     }
  225.     h1 {
  226.       font-weight: bold;
  227.     }
  228.     h2 {
  229.       margin-bottom: 10px;
  230.       font-weight: bold;
  231.     }
  232.     p {
  233.       margin-bottom: 20px;
  234.     }
  235.   }
  236.  
  237.   div.third {
  238.     float: left;
  239.     width: 40%;
  240.     img {
  241.  
  242.     }
  243.   }
  244.  
  245.   div.tripple {
  246.     width: 33%;
  247.     float: left;
  248.     margin-bottom: 20px;
  249.   }
  250.  
  251.   div.right {
  252.     text-align: center;
  253.     img {
  254.       width: 100%;
  255.       height: auto;
  256.       max-width: 390px;
  257.     }
  258.   }
  259. }
  260.  
  261. section.image {
  262.   padding: 30px;
  263.   img {
  264.     width: 100%;
  265.     height: auto;
  266.   }
  267. }
  268.  
  269. section.content {
  270.   //background: $subcolor;
  271.   //color: $maincolor;
  272.   margin-bottom: 30px;
  273.   h1 {
  274.     margin: -50px -30px 30px -30px;
  275.     background: #e2001a;
  276.     color: $subcolor;
  277.     min-width: 150px;
  278.     padding: 20px;
  279.   }
  280.  
  281.   a {
  282.     color: $maincolor;
  283.   }
  284.  
  285.   h2 {
  286.     margin-bottom: 5px;
  287.   }
  288.  
  289.   div.right {
  290.     margin-top: 30px;
  291.   }
  292.   ul {
  293.     margin-bottom: 20px;
  294.   }
  295. }
  296.  
  297. section.sitemap {
  298.   line-height: 27px;
  299.  
  300.   .row {
  301.     width: 100%;
  302.  
  303.     .col-md-6 {
  304.       padding-left: 10%;
  305.       width: 40%;
  306.       float: left;
  307.  
  308.       .tp_headline {
  309.         margin-bottom: 15px;
  310.       }
  311.  
  312.       h3 {
  313.         font-weight: bold;
  314.         margin-bottom: 0;
  315.       }
  316.       li {
  317.         list-style: none;
  318.       }
  319.     }
  320.   }
  321. }
  322.  
  323. section.infos {
  324.   background: $maincolor;
  325.   color: $subcolor;
  326.   ul.contentnav {
  327.     li {
  328.       width: 32%;
  329.       margin-left: 2%;
  330.       position: relative;
  331.       float: left;
  332.       img {
  333.         width: 100%;
  334.         height: auto;
  335.       }
  336.       span {
  337.         position: absolute;
  338.         left: 0;
  339.         bottom: 0;
  340.         display: block;
  341.         background: $maincolor;
  342.         width: 80%;
  343.         font-size: 1.2em;
  344.         padding: 15px;
  345.         @include box-sizing();
  346.       }
  347.     }
  348.     li:first-child {
  349.       margin-left: 0;
  350.     }
  351.   }
  352. }
  353.  
  354. div.software {
  355.   margin-bottom: 30px;
  356.   h2 {
  357.     margin-bottom: 0;
  358.     line-height: 65px;
  359.     padding-left: 60px;
  360.     font-size: 2em;
  361.   }
  362. }
  363.  
  364. div.softnav {
  365.   width: 40%;
  366.   float: left;
  367.   ul {
  368.     background: $maincolor;
  369.     padding-top: 60px;
  370.     position: relative;
  371.     border: 1px solid $maincolor;
  372.   }
  373.   a {
  374.     display: block;
  375.     color: $subcolor;
  376.     margin-bottom: 10px;
  377.     padding: 10px 30px;
  378.     font-size: 1.2em;
  379.   }
  380.   li.toolpaket {
  381.     color: $subcolor;
  382.     margin-top: -60px;
  383.     padding: 10px 30px;
  384.     font-size: 1.4em;
  385.   }
  386.   li:last-child {
  387.     bottom: 0px;
  388.     left: 0;
  389.     right: 0;
  390.     margin-top: 50px;
  391.     a {
  392.       margin-bottom: 0;
  393.     }
  394.   }
  395. }
  396. a.topbacklink {
  397.     color: #fff; 
  398.     float: left; 
  399.     font-size: 1.2em;
  400.     width: 120px;
  401.     text-align: center;
  402.     padding: 22px 0;
  403.     margin-right: 60px;
  404. }    
  405.  
  406. div.topsoft {
  407.   h2 {
  408.     //border-left: 120px solid $topsoft;
  409.   }
  410.   a.topbacklink {
  411.       background: $topsoft;
  412.   }    
  413.   div.softnav {
  414.     a.active, a:hover {
  415.       background: $topsoft;
  416.     }
  417.   }
  418. }
  419.  
  420. div.tools {
  421.   h2 {
  422.     //border-left: 120px solid $tools;
  423.   }
  424.   a.topbacklink {
  425.       background: $tools;
  426.   } 
  427.   div.softnav {
  428.     a.active, a:hover {
  429.       background: $tools;
  430.     }
  431.   }
  432. }
  433.  
  434. div.multimedia {
  435.   h2 {
  436.     //border-left: 120px solid $mm;
  437.   }
  438.   a.topbacklink {
  439.       background: $mm;
  440.   } 
  441.   div.softnav {
  442.     a.active, a:hover {
  443.       background: $mm;
  444.     }
  445.   }
  446. }
  447.  
  448. div.extras {
  449.   h2 {
  450.     //border-left: 120px solid $extras;
  451.   }
  452.   a.topbacklink {
  453.       background: $extras;
  454.   } 
  455.   div.softnav {
  456.     a.active, a:hover {
  457.       background: $extras;
  458.     }
  459.   }
  460. }
  461.  
  462. div.demo {
  463.   h2 {
  464.     //border-left: 120px solid $demo;
  465.   }
  466.   a.topbacklink {
  467.       background: $demo;
  468.   }
  469.   div.softnav {
  470.     a.active, a:hover {
  471.       background: $demo;
  472.     }
  473.   }
  474. }
  475.  
  476. div.softcontent {
  477.   width: 60%;
  478.   padding-left: 5%;
  479.   float: left;
  480.   @include box-sizing();
  481.   img {
  482.     width: 100%;
  483.     height: auto;
  484.     margin-bottom: 30px;
  485.   }
  486.   ul {
  487.     padding-left: 12px;
  488.   }
  489.   ul.functions {
  490.     list-style: none;
  491.     text-align: right;
  492.     margin-top: 40px;
  493.     li {
  494.       display: inline;
  495.       margin-left: 15px;
  496.     }
  497.     img {
  498.       width: auto;
  499.       margin: 0 0 0 5px;
  500.     }
  501.   }
  502.   h3.info {
  503.     color: $topsoft;
  504.     font-weight: bold;
  505.   }
  506.   div.hint {
  507.     border: 1px dashed #727272;
  508.     //background: #f5f5f5;
  509.     padding: 10px;
  510.     margin: 10px 0;
  511.     a {
  512.       color: $topsoft;
  513.     }
  514.   }
  515. }
  516.  
  517. footer {
  518.   padding: 0 30px 0 30px;
  519.   p {
  520.     float: left;
  521.   }
  522.   ul {
  523.     float: right;
  524.     margin-top: -10px;
  525.     li {
  526.       float: left;
  527.       margin: 0 0 20px 10px;
  528.     }
  529.   }
  530. }
  531.  p.article_image {
  532.     text-align: center;
  533.     padding: 20px 0;
  534. }
  535. .pcm {
  536.   display: none !important;
  537. }  
  538. section a.sw, section a.ui-open-link {
  539.     color: #033990
  540. }
  541. span.inactive {
  542.     color: #dadada;    
  543. } 
  544. section.banner {
  545.     padding: 0;
  546.     border: none;
  547. }
  548. section.banner img {
  549.     width: 100%;
  550.     height: auto;
  551. }